<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>游园活动项目二维码</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody apply-box-left-from">
        <div class="">
          <div class="forumcode savebox" ref="imageDom">
            <img src="@/assets/imageAdmin/codebg.png" alt="" class="saveimgBg">
            <div class="apply-code-title">
              <p class="title-top">游园活动</p>
<!--              <p class="title-article">学校：厦门第一幼儿园</p>-->
<!--              <p class="title-article">活动：秋季校园展览</p>-->
              <p class="title-article">项目名称：{{detailData?detailData.title: '--'}}</p>
<!--              <p class="title-article">时间：2023-05-16</p>-->
              <div class="title-body">
              </div>
              <div class="apply-code-img" style="width:220px;">
                <div id="qrcode"></div>
              </div>
              <p class="getcode">扫码签到</p>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
        <el-button @click.native="downloadIamge" size="small" type="primary" plain>下载二维码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import {systemIndex} from '@/api/admin/system';
import {garden_party_option_Detail} from "@/api/admin/school"
export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      detailData: null
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getDetail()
      }else{
        this.detailData = null
      }
    }
  },
  created() {

  },
  methods: {
    getDetail() {
      garden_party_option_Detail({id: this.detailId}).then(res => {
        console.log('res:', res)
        this.detailData = res.vo
        this.qrcodeGet()
      })
    },
    // 生成二维码
    qrcodeGet() {
      let self_ = this
      systemIndex({}).then(response => {
        let qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200, // 高度
          text: `${response.vo.url}/program/#/activeSign?id=${this.detailId}`// 二维码内容
        })
        setTimeout(() => {
          self_.html2canvasFn()
        }, 200)
      })
    },
    html2canvasFn() {
      let self_ = this
      let opts = {
        useCORS: true
      }
      html2canvas(self_.$refs.imageDom, opts).then(canvas => {
        let image = new Image()
        image.onload = function () {
          self_.imgUrl = canvas.toDataURL('image/png')
          self_.codeloading = false
        }
        image.src = canvas.toDataURL('image/png')
      })
    },
    downloadIamge() { // 下载图片地址和图片名
      let image = new Image()// 解决跨域 Canvas 污染问题
      let this_ = this
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = '2023-05-16校园活动' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = this.imgUrl
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: auto;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

</style>


